<template>
  <div>
    <el-card class="box-card" style="height: 730px">
      <div slot="header" class="clearfix">

        <el-form :inline="true" :model="projectResourceForm" :rules="rules" ref="rulesForm" label-width="100px"
                 class="demo-inline">
          <el-form-item style="margin-top: 30px" label="项目名称" prop="projectName">
            <el-select v-model="projectResourceForm.projectId" placeholder="请选择项目名称" style="width: 400px">
              <el-option
                v-for="project in projectList"
                :key="project.projectId"
                :label="project.projectName"
                :value="project.projectId"
              ></el-option>
            </el-select>
          </el-form-item>


          <el-form-item style="margin-top: 30px" label-width="200px" label="资源名称" prop="resourceName">
            <el-input style="width: 400px" v-model="projectResourceForm.resourceName"
                      placeholder="请输入资源名称"></el-input>
          </el-form-item>


          <el-form-item label="资源类型" prop="resourceType">
            <el-select v-model="projectResourceForm.resourceType" placeholder="请选择资源类型" style="width: 400px">
              <el-option label="图片" :value="1"></el-option>
              <el-option label="视频" :value="2"></el-option>
              <el-option label="图纸" :value="3"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label-width="200px" label="发起人" prop="createBy">
            <el-input v-model="name" disabled style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item v-model="projectResourceForm.projectDepartment" label="归属部门" prop="projectDepartment"
                        style="width: 1000px;">
            <el-input style="width: 400px" v-model="projectResourceForm.projectDepartment"></el-input>
          </el-form-item>

          <el-form-item label="链接地址" prop="resourceUrl">
            <el-input type="textarea" v-model="projectResourceForm.resourceUrl" rows="6" style="width: 1010px"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="projectResourceForm.remark" rows="6" style="width: 1010px"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card">
      <div>
        <el-form>
          <el-form-item size="medium" label-width="1100px">
            <el-button @click="cancel" class="cancel">取消</el-button>
            <el-button @click="editProject('rulesForm')" class="save" type="primary">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>


<script>
import {mapGetters} from "vuex";
import {addProject, updateProject, getList} from '@/api/pr/resource'

export default {
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  name: 'projectAdd',
  data() {
    return {
      projectResourceForm: {
        projectId:"", // 项目ID
        projectName: "", // 项目名称
        resourceType: "", // 资源类型
        resourceName: "", // 资源名称
        resourceId: "", // 资源ID
        createBy: "", // 创建人/发起人
        projectDepartment: "", // 归属部门
        resourceUrl: "", // 资源链接地址
        remark: "", // 备注
      },
      projectList: [], // 用来存放项目数据
      rules: {
        projectName: [
          {required: true, message: '请选择项目名称', trigger: 'change'}
        ],
        resourceName: [
          {required: true, message: '请输入资源名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        resourceType: [
          {required: true, message: '请选择资源类型', trigger: 'change'}
        ],
      }
    };
  },
  mounted() {
    this.fetchProjects(); // 组件加载时获取项目数据
  },

  methods: {
    fetchProjects() {
      fetch('/api/pr/user/add') // 假设你的 API 地址是 /api/projects
        .then(response => {
          this.projectList = response.data; // 将获取到的项目数据赋值给 projectList
        })
        .catch(error => {
          console.error('获取项目列表失败:', error);
        });
    },

    // 取消,返回项目资源页面
    cancel() {
      this.$router.push('/projectResource');
    },

    // 添加/编辑项目资源表单
    editProject(formName) {
      const title = this.$route.params.title;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (title == "添加项目资源") {
            addProject(this.projectResourceForm).then((res) => {
              this.$message.success("添加成功")
            }).catch(error => {
              this.$message.error("添加失败", error)
            })
          } else {
            if (title == "编辑项目资源") {
              updateProject(this.projectResourceForm).then((res) => {
                this.$message.success("更新成功")
              }).catch(error => {
                this.$message.error("更新失败", error)
              })
            }
          }
        }
      })
    },
  },

  created() {
    getList({}).then(res => {
      if (code === 2000) {
        this.projectList = res.data.list
      }
    })
  },
}
</script>

<style scoped lang="scss">
.cancel {
  color: #185dc6;
  background-color: #ffffff;
  border-color: #185dc6;
}

.save {
  color: #ffffff;
  background-color: #306ecc;
  border-color: #306ecc;
}
</style>
